<template>
    <el-dialog
            :visible="this.visible"
            class="searchOrderDialog"
            width="100%"
            @close="closeDialog"
            @open="openDialog"
            :append-to-body="true"
            center close-on-click-modal>

        <span>{{$t('工单类型')}}</span>
        <el-select
                v-model="workOrderType"
                filterable
                remote
                reserve-keyword
                :placeholder="$t('请输入关键词')"
                :remote-method="changeWorkOrderType">
            <el-option
                    v-for="item in workOrderTypeUseList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
            </el-option>
        </el-select>
        <span>{{$t('工单内容')}}</span>
        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" :placeholder="$t('工单内容')" v-model="wOrderData"/>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit" style="width: 100%">{{$t('提交')}}</el-button>
  </span>
    </el-dialog>
</template>

<script>

import apiService from "@/api/apiService";

export default {
    name: "WorkOrderSubmitDialog",
    props: {
        statsOptions: {type: Array},
        serviceList: {type: Array},
        visible: {type: Boolean}
    },
    model: {
        event: ['dialogSearch'],
    },
    data() {
        return {
            wOrderData:'',
            workOrderTypeList: [],
            workOrderTypeUseList: [],
            workOrderType:'',
        }
    },
    mounted() {
        window.addEventListener('resize', this.resizeSelect);
        this.$nextTick(function () {
            apiService.get("/info-worktype").then(res => {
                this.workOrderTypeList = res.data
                this.workOrderTypeUseList = this.workOrderTypeList.slice(0,this.workOrderTypeList.length>5?5:this.workOrderTypeList.length)
            })
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeSelect);
    },
    methods: {
        changeWorkOrderType(val) {
            console.log(val)
            const filterWorkOrderTypeList = this.workOrderTypeList.filter(x => x.name.includes(val))
            this.workOrderTypeUseList = filterWorkOrderTypeList.slice(0,filterWorkOrderTypeList.length>5?5:filterWorkOrderTypeList.length)
        },
        resizeSelect() {
            this.$nextTick(()=> {
                this.selectOptionWidth = this.$el.querySelector('.dialog-select').offsetWidth+'px !important'
            })
        },
        resetForm() {
            this.serviceId = ''
            this.statValue = ''
            this.imeis = ''
        },
        closeDialog() {
            this.changeDialogState(false);
            this.resetForm()
        },
        openDialog() {
            this.resizeSelect()
            this.changeDialogState(true);
        },
        changeDialogState(state) {
            this.$emit('changeDialogState', state)
        },
        submit() {
          let req = this.addWorkOrderReq();
          this.$emit('dialogSubmit', req);
          this.wOrderData = '';
          this.workOrderType = '';
          this.closeDialog();
          this.workOrderTypeUseList = this.workOrderTypeList.slice(0,this.workOrderTypeList.length>5?5:this.workOrderTypeList.length)
        },
        searchByStatus(val) {
            let req = this.addWorkOrderReq();
            req.apResult=val
            this.$emit('dialogSearch', req)
            this.closeDialog()
        },
        addWorkOrderReq(){
            return  {
                worderData:this.wOrderData,
                worderType:this.workOrderType,
            };
        }
    }
}

</script>
<style>
.searchOrderDialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchOrderDialog .el-dialog--center {
    text-align: center;
    max-width: 1000px;
    position: fixed;
    margin-bottom: 0;
    bottom: 0;
}
.status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 1rem;
}

.box.b0 {
    border: 3px solid #e69912;
}

.box.b1 {
    border: 3px solid #3098de
}

.box.b2 {
    border: 3px solid #89c40e
}

.box.b3 {
    border: 3px solid #e54a3c;
}

.box {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .1rem;
    height: 100%;
    width: fit-content;
    min-width: 32px;
    border: 3px solid #ccc;
    border-radius: 3px;
    padding: 3px 4px;
}

.title {
    font-size: 12px;
    text-align: center;
    margin-bottom: 5px;
}

.number {
    font-size: 20px;
    text-align: center;
    width: 100%;
    min-width: 3rem;
}

.no-divider:not(:last-child)::after {
    content: none !important; /* 移除组之间的分割线 */
}

.no-divider:not(:last-of-type) {
    padding-bottom: 0;
}

.el-select-group__title {
    margin: 0;
    /*padding: .50rem 1.25rem;*/
    color: #343a40;
    background: #ffffff;
    font-weight: 600;
    font-size: smaller;
}

.el-select {
    width: 100%;
    max-width: 1000px;
    /*margin-bottom: 1.5rem*/
}
</style>